<template>
	<view>
		<!--头部-->
		<view class="navbarbox">
			<view class="navbar">
				<view class="navbartitle">我的娃娃</view>
				<image @click="cancela" class="navbarimage" src="../../static/icon/lefticon.png"></image>
				<u-icon @click="open" class="navbarshuom" name="question-circle" color="#161723" size="39"></u-icon>
			</view>
			<view class="navbarview">
				<view class="navbarrow">
					<view class="navbarli" @click="itemdata(0)" :class="itemindex==0?'navbarli-in':''">寄存娃娃</view>
					<view class="navbarli" @click="itemdata(1)" :class="itemindex==1?'navbarli-in':''">全部娃娃</view>
					<view class='databox-av'
						:style='itemindex == 0 ? "left:18.5%;" : "" || itemindex == 1 ? "left:68.5%;" : "" '>
					</view>
				</view>
			</view>
		</view>

		<!-- 列表数据 -->
		<view class="listbox">
			<view class="left">
				<block v-for="(item,index) in arrlist" :key="index">
					<view v-if="index%2==0" class="item" @click="detailsa(item,index)">
						<view class="item-img">
							<image class="item-imgurl" :src="item.main_picture"></image>
							<view class="desc-ba">
								<text style="color: #ffffff;font-size: 25rpx;">抓取获取</text>
							</view>
							<image class="desc-bg" mode="widthFix" src="../../static/icon/fixed.png"></image>
						</view>
						<view class="item-titlea">
							<text v-if="item.status==1" class="item-titlea-text">寄存中</text>
							<text v-if="item.status==2" class="item-titlea-text">已发货</text>
							<text v-if="item.status==3" class="item-titlea-text">主动兑换积分</text>
							<text v-if="item.status==4" class="item-titlea-text">过期兑换积分</text>
							<text style="color: #353535;font-weight: 600;font-size: 30rpx;">{{item.name}}</text>
						</view>
						<view style="font-size: 23rpx;color:#8a8a8a;margin-left: 15rpx;margin-top: 15rpx;">
							获取时间：{{item.create_time}}</view>
						<view class="item-platforma">
							<view class="item-platform-left flex ac">
								<view class="flex ac">
									<text style="font-size: 26rpx;color:#FF411F;">13天后过期</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="right">
				<block v-for="(item,index) in arrlist" :key="index">
					<view v-if="index%2==1" class="item" @click="detailsa(item,index)">
						<view class="item-img">
							<image class="item-imgurl" :src="item.main_picture"></image>
							<view class="desc-ba">
								<text style="color: #ffffff;font-size: 25rpx;">抓取获取</text>
							</view>
							<image class="desc-bg" mode="widthFix" src="../../static/icon/fixed.png"></image>
						</view>
						<view class="item-titlea">
							<text v-if="item.status==1" class="item-titlea-text">寄存中</text>
							<text v-if="item.status==2" class="item-titlea-text">已发货</text>
							<text v-if="item.status==3" class="item-titlea-text">主动兑换积分</text>
							<text v-if="item.status==4" class="item-titlea-text">过期兑换积分</text>
							<text style="color: #353535;font-weight: 600;font-size: 30rpx;">{{item.name}}</text>
						</view>
						<view style="font-size: 23rpx;color:#8a8a8a;margin-left: 15rpx;margin-top: 15rpx;">
							获取时间：{{item.create_time}}</view>
						<view class="item-platforma">
							<view class="item-platform-left flex ac">
								<view class="flex ac">
									<text style="font-size: 26rpx;color:#FF411F;">13天后过期</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<!-- 上拉加载数据 -->
		<view class="loadmore">
			<view v-if="load" class="loading-more">
				<view class="more-bottom-line" style="display: flex;">
					<view class="more-loading"></view>
					<text class="more-lineTxt">正在加载...</text>
				</view>
			</view>
			<view v-if="nomore==false" class="more-finish">
				<view class="more-bottom-line">
					<view class="more-line"></view>
					<text class="more-lineTxt">暂无更多了~</text>
					<view class="more-line"></view>
				</view>
			</view>
		</view>

		<!-- 暂无订单 -->
		<view v-if="nodata==true" class="nodatabox">
			<image style="width: 230rpx;" mode="widthFix" src="../../static/icon/aa/nodata1.png"></image>
			<view class="nodatatext">娃娃还在娃娃机里</view>
			<view class="nodataborder" @click="quzhua">去抓娃娃</view>
		</view>

		<!-- 撑开 -->
		<view style="width: 100rpx;height: 120rpx;"></view>
		<!-- 底部 -->
		<view class="bottombox flex ac">
			<view class="bottombox-left">
				<view style="color: #161723;font-size: 28rpx;">共抓中<span
						style="color: #ff4e2e;padding:0 5rpx;">0</span>个娃娃</view>
				<view style="color: #161723;font-size: 28rpx;"><span
						style="color: #ff4e2e;padding-right:5rpx;">0</span>个寄存中</view>
			</view>
			<view class="bottombox-right" @click="duihuan">兑换</view>
		</view>

		<!-- 弹窗说明样式 -->
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view class="popup-box">
				<view @click="close" class="closebox">
					<u-icon name="close" color="#b1b1b1"></u-icon>
				</view>
				<view style="width: 100%;height: 70rpx;"></view>
				<view class="popup-content-title"></view>
				<view class="popup-content">
					<view style="width: 100%;height: 60rpx;"></view>
					<view style="font-size: 28rpx;margin-left: 20rpx;font-weight: bold;margin-bottom: 10rpx;">关于抓中的娃娃礼品:
					</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">
						1，抓中的娃娃免费存放15天，您可在到期前手动申请发货或者24小时后申请兑换积分，如到期前仍未操作的系统将默认收回礼品，并自动为您兑换一半的积分或者0积分。</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">
						2，积分可前往【积分商城】兑换更丰富的礼品。如京东卡/苏宁卡/话费/以及其他电器生活用品类等。</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">
						3，礼品需手动申请发货，俩个起全国包邮；暂不支持港澳台地区和海外发，活动奖品不参与包邮活动，且需与抓取礼品一起方可提交订单。默认圆通快递，圆通不到的会为您安排邮政发出，暂不支持指定快递公司。
					</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">
						4，娃娃申请发货后，订单将在俩个工作日左右发出，预售款式以实际到货时间为准。如遇假期、大型活动日、缺货或国家不可控因素等，发货时效将延迟。</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">5，混款礼品只能随机发，暂时无法指定款式或色号。
					</view>
					<view style="width: 100%;height: 30rpx;"></view>
					<view style="font-size: 28rpx;margin-left: 20rpx;font-weight: bold;margin-bottom: 10rpx;">关于售后：
					</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">
						1，毛绒娃娃为手工收口，难免会出现小开口的情形，如用户已经自己手动修复的，可联系人工客服申请额外奖励。</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">
						2，礼品会因为厂家出厂批次的不同，图片与实物会存在轻微差异，详情页尺寸为平铺测量的最大尺寸，会存在5+-左右的误差，以上均以收到实物为准。</view>
					<view style="width: 100%;height: 30rpx;"></view>
					<view style="font-size: 28rpx;margin-left: 20rpx;font-weight: bold;margin-bottom: 10rpx;">【订单问题】
					</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">
						1，订单一旦发出，出现物流异常的请在一个自然月内反馈，超时物流将无法为您核实。</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">
						2，如需换货，请在客服提供指定退回地址的3个工作日内安排寄回礼品，如擅自退回或者超期未退回，将默认完结售后。</view>
					<view style="width: 100%;height: 30rpx;"></view>
					<view style="font-size: 28rpx;margin-left: 20rpx;font-weight: bold;margin-bottom: 10rpx;">【物流问题】
					</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">
						1，订单一旦发出，出现物流异常的请在一个自然月内反馈，超时物流将无法为您核实。</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">
						2，下单请正确填写地址信息和联系方式，如订单因收件信息有误或无法联系收件人等原因导致派件失败而退回的包裹，在您再次申请寄送时，将不再享受包邮政策，需您额外支付运费后方可重新补单发出。
					</view>
					<view style="width: 100%;height: 30rpx;"></view>
					<view style="font-size: 28rpx;margin-left: 20rpx;font-weight: bold;margin-bottom: 10rpx;">【人工客服】
					</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">
						1，人工客服服务时间为：上午9点-11点45分，下午13点15分-18点整），需联系人工客服的请务必工作时间联系哦~</view>
					<view style="font-size: 28rpx;margin-left: 20rpx;margin-bottom: 10rpx;">2，
						如需再次联系客服确认售后处理方案的，可进入对话框后往前翻看聊天记录，一般有结果的都会有客服的留言信息！</view>
					<view style="width: 100%;height: 30rpx;"></view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				statusvalue: 1,
				arrlist: [],
				pageIndex: 1,
				load: true,
				nomore: true,
				nodata: false,
				hasMore: false,
				itemindex: 0,
				show: false,
			}
		},

		onLoad(e) {
			this.userdolldata()
		},

		// 上拉触底事件
		onReachBottom: function() {
			var that = this
			if (that.hasMore) {
				that.userdolldata() //调用函数
			}
		},

		methods: {
			duihuan(e) {
				uni.navigateTo({
					url: '/pages/delivery/delivery?id=' + '' + '&index=' + 0
				})
			},

			detailsa(e, index) {
				// var objstr =JSON.stringify(e)
				// uni.navigateTo({
				// 	url: '/pages/dolldetails/dolldetails?data=' + objstr
				// })
				uni.navigateTo({
					url: '/pages/dolldetails/dolldetails?index=' + index
				})
			},

			open(e) {
				this.show = true
			},

			close(e) {
				this.show = false
			},

			async userdolldata(e) {
				let apply = await request(`${getApp().globalData.http}user/user_doll`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					page_num: this.pageIndex,
					page_size: 10,
					status: this.statusvalue,
				})
				if (apply.data.code == 0) {

					this.arrlist = this.arrlist.concat(apply.data.data)

					var arr = []
					for (var i = 0; i < apply.data.data.length; i++) {
						if (apply.data.data[i].status == 1) {
							arr.push(apply.data.data[i])
						}
					}
					uni.setStorageSync('key', arr);

					// 上拉加载数据
					if (apply.data.page_num == apply.data.total_num) {
						this.hasMore = false
					} else {
						this.hasMore = true
					}
					if (apply.data.data.length == 0) {
						this.nomore = true
						this.nodata = true
					}
					if (apply.data.data.length !== 0) {
						this.nomore = true
						this.nodata = false
					}

					if (this.hasMore) {
						this.pageIndex = this.pageIndex + 1
					} else {
						this.load = false
						if (apply.data.data.length == 0) {
							this.nomore = true
						} else {
							this.nomore = false
						}
					}
				}
			},

			//返回上一页
			cancela(e) {
				uni.navigateBack({
					dalta: 1,
				})
			},

			quzhua(e) {
				uni.reLaunch({
					url: '../home/home'
				})
			},

			itemdata(e) {
				if (this.itemindex == e) {
					return
				}

				this.load = true
				this.nomore = true
				this.nodata = false
				this.hasMore = false
				this.arrlist = []
				this.pageIndex = 1
				this.itemindex = e
				if (this.itemindex == 0) {
					this.statusvalue = 1
				} else {
					this.statusvalue = ''
				}
				this.userdolldata()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f8;
	}

	// 头部
	.navbarbox {
		background-color: #ffffff;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.navbar {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.navbartitle {
		color: #161723;
		font-size: 32rpx;
		font-weight: 700;
	}

	.navbarimage {
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		top: 30rpx;
		left: 20rpx;
	}

	.navbarshuom {
		position: absolute;
		width: 35rpx;
		height: 35rpx;
		top: 30rpx;
		right: 30rpx;
	}

	.navbarrow {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		position: relative;
	}

	.navbarli {
		width: 50%;
		line-height: 60rpx;
		text-align: center;
		color: #73747B;
		font-size: 30rpx;
	}

	.navbarli-in {
		color: #161723;
		font-size: 31rpx;
		font-weight: 600;
	}

	.databox-av {
		position: absolute;
		bottom: 19rpx;
		width: 13%;
		height: 8rpx;
		background-color: #353535;
		border-radius: 30px;
		transition: all 500ms;
		left: 18.5%;
	}

	// 暂无订单
	.nodatabox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 188rpx;
	}

	.nodatatext {
		font-size: 28rpx;
		color: #878787;
		margin: 20rpx 0;
	}

	.nodataborder {
		border: 1px solid #e5e5e5;
		font-size: 28rpx;
		color: #353535;
		padding: 15rpx 50rpx;
		border-radius: 50rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	/* 爆布流列表 */
	.listbox {
		text-align: justify;
	}

	.left {
		display: inline-block;
		vertical-align: top;
		width: 345rpx;
		margin-left: 20rpx;
	}

	.right {
		display: inline-block;
		vertical-align: top;
		width: 345rpx;
		margin-left: 20rpx;
	}

	.item {
		width: 345rpx;
		background-color: #ffffff;
		margin-bottom: 8rpx;
		display: inline-block;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 0 0.10667rem 0 rgba(0, 0, 0, .1);
	}

	.item-img {
		width: 345rpx;
		height: 345rpx;
		position: relative;
	}

	.desc-bg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 345rpx;
		height: 43rpx;
	}

	.desc-ba {
		width: 345rpx;
		height: 50rpx;
		background-color: rgba(0, 0, 0, .7);
		position: absolute;
		bottom: 15rpx;
		left: 0;
		border-radius: 20rpx 20rpx 0 0;
		text-align: center;
		padding-top: 3rpx;
	}

	.item-imgurl {
		width: 345rpx;
		height: 345rpx;
		border-radius: 20rpx;
	}

	.item-titlea {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-family: 'PingFang SC-Medium';
		margin: 5rpx 15rpx;
		line-height: 39rpx;
	}

	.item-titlea-text {
		background-color: #FF411F;
		font-size: 28rpx;
		border-radius: 10rpx;
		color: #ffffff;
		margin-right: 10rpx;
		padding: 5rpx 10rpx;
	}

	.item-platforma {
		display: flex;
		align-items: center;
		margin: 15rpx 15rpx 30rpx 15rpx;
	}

	.bottombox {
		width: 100%;
		height: 120rpx;
		background-color: #ffffff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 0 20rpx;
		box-shadow: 0 -0.02667rem 0.10667rem 0 rgba(0, 0, 0, .05)
	}

	.bottombox-left {
		flex: 1;
	}

	.bottombox-right {
		width: 120rpx;
		height: 65rpx;
		background-color: #EEF2F7;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #2A2A2A;
		border-radius: 50rpx;
	}

	// 弹窗样式
	.popup-box {
		width: 100%;
		height: 1100rpx;
		padding: 0 30rpx;
		position: relative;
	}

	.closebox {
		position: absolute;
		right: 25rpx;
		top: 20rpx;
	}

	.popup-content {
		height: 1030rpx;
		overflow-y: scroll;
		background-color: #f8f7fc;
		border-radius: 10rpx;
	}

	.popup-content-title {
		width: 230rpx;
		height: 65rpx;
		background-image: url('../../static/icon/aa/notice.png');
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		position: absolute;
		top: 35rpx;
		left: 40rpx;
	}
</style>